<template>
  <view class="uni-container">
    <uni-forms ref="form" v-model="formData" :rules="rules" validateTrigger="bind" @submit="submit">
      <uni-forms-item name="username" label="用户名">
        <uni-easyinput v-model="formData.username" :clearable="false" placeholder="请输入用户名" />
      </uni-forms-item>
      <uni-forms-item name="nickname" label="用户昵称" required>
        <uni-easyinput v-model="formData.nickname" :clearable="false" placeholder="请输入用户昵称" />
      </uni-forms-item>
      <uni-forms-item v-if="showPassword" name="password" label="重置密码" key="password">
        <uni-easyinput v-model="formData.password" :clearable="false" placeholder="请输入重置密码">
          <view slot="right" class="cancel-reset-password-btn" @click="trigger">取消</view>
        </uni-easyinput>
      </uni-forms-item>
      <uni-forms-item v-else label="重置密码">
        <span class="reset-password-btn" @click="trigger">点击重置密码</span>
      </uni-forms-item>
      <uni-forms-item name="integral" label="用户积分" required>
        <uni-easyinput v-model="formData.integral" type="number" :clearable="false" placeholder="请输入用户积分,最少为0" />
      </uni-forms-item>
      <uni-forms-item name="role" label="角色列表" class="flex-center-x">
        <uni-data-checkbox multiple :localdata="roles" v-model="formData.role" />
      </uni-forms-item>
      <uni-forms-item name="tags" label="用户标签" labelWidth="100" class="flex-center-x">
        <uni-data-checkbox ref="checkboxTags" :multiple="true" v-model="formData.tags" collection="uni-id-tag"
          field="tagid as value, name as text"></uni-data-checkbox>
        <span class="link-btn" @click="gotoTagAdd">新增</span>
        <span class="link-btn" @click="gotoTagList" style="margin-left: 10px;">管理</span>
      </uni-forms-item>
      <uni-forms-item name="authorizedApp" label="可登录应用">
        <view class="uni-forms-item-flex-center-x">
          <uni-data-checkbox :multiple="true" v-model="formData.authorizedApp" :localdata="appList"></uni-data-checkbox>
          <span class="link-btn" @click="gotoAppList">管理</span>
        </view>
        <view v-if="formDataId === userId" class="uni-form-item-tips">当前有未添加的应用{{ unknownAppidsCom }}，建议点击右侧管理进行添加
        </view>
      </uni-forms-item>
      <uni-forms-item name="mobile" label="手机号">
        <uni-easyinput v-model="formData.mobile" :clearable="false" placeholder="请输入手机号" />
      </uni-forms-item>
      <uni-forms-item name="email" label="邮箱">
        <uni-easyinput v-model="formData.email" :clearable="false" placeholder="请输入邮箱" />
      </uni-forms-item>
      <uni-forms-item name="status" label="用户状态">
        <switch v-if="Number(formData.status) < 2" @change="binddata('status', $event.detail.value)"
          :checked="formData.status" :disabled="formDataId === userId" />
        <view v-else class="uni-form-item-empty">{{parseUserStatus(formData.status)}}</view>
        <view v-if="formDataId === userId" class="uni-form-item-tips">请勿禁用当前登录的账号</view>
      </uni-forms-item>
      <view class="uni-button-group">
        <button style="width: 100px;" type="primary" class="uni-button"
          @click="submitForm">{{$t('common.button.submit')}}</button>
        <navigator open-type="navigateBack" style="margin-left: 15px;"><button style="width: 100px;"
            class="uni-button">{{$t('common.button.back')}}</button></navigator>
      </view>
    </uni-forms>
  </view>
</template>

<script>
  import {
    validator
  } from '@/js_sdk/validator/uni-id-users.js';

  const db = uniCloud.database();
  const dbCmd = db.command;
  const dbCollectionName = 'uni-id-users';

  function getValidator(fields) {
    let result = {}
    for (let key in validator) {
      if (fields.includes(key)) {
        result[key] = validator[key]
      }
    }
    return result
  }

  export default {
    data() {
      return {
        showPassword: false,
        formData: {
          "username": "",
          "nickname": "",
          "password": undefined,
          "role": [],
          "tags": [],
          "integral": 0,
          "authorizedApp": [],
          "mobile": undefined,
          "email": undefined,
          "status": false //默认禁用
        },
        rules: {
          ...getValidator(["username", "password", "role", "mobile", "email", "integral"]),
          "status": {
            "rules": [{
              "format": "bool"
            }]
          }
        },
        roles: [],
        userId: "",
        appList: [],
        unknownAppids: []
      }
    },
    onLoad(e) {
      const id = e.id
      this.formDataId = id
      let userInfo = uni.getStorageSync("uni-id-pages-userInfo") || {};
      this.userId = userInfo._id;
      this.getDetail(id)
      this.loadroles();
    },
    methods: {
      /**
       * 跳转应用管理的 list 页
       */
      gotoAppList() {
        uni.navigateTo({
          url: '../app/list'
        })
      },
      gotoTagList() {
        uni.navigateTo({
          url: '../tag/list'
        })
      },
      gotoTagAdd() {
        uni.navigateTo({
          url: '../tag/add',
          events: {
            refreshCheckboxData: () => {
              this.$refs.checkboxTags.loadData();
            }
          }
        })
      },
      /**
       * 切换重置密码框显示或隐藏
       */
      trigger() {
        this.showPassword = !this.showPassword
      },

      /**
       * 触发表单提交
       */
      submitForm(form) {
        this.$refs.form.submit();
      },

      /**
       * 表单提交
       * @param {Object} event 回调参数 Function(callback:{value,errors})
       */
      submit(event) {
        console.log(event, 'eventevent');
        const {
          value,
          errors
        } = event.detail
        // 表单校验失败页面会提示报错 ，要停止表单提交逻辑
        if (errors) {
          return
        }
        uni.showLoading({
          title: '修改中...',
          mask: true
        })

        // 是否启用功能的数据类型转换， 0 正常， 1 禁用
        if (typeof value.status === "boolean") {
          value.status = Number(!value.status)
        }
        value.uid = this.formDataId

        this.$request('updateUser', value).then((res) => {
          console.log(res);
          uni.showToast({
            title: '修改成功'
          })
          const eventChannel = this.getOpenerEventChannel();
          if (eventChannel.emit) eventChannel.emit('refreshData');
          setTimeout(() => uni.navigateBack(), 500)
        }).catch(err => {
          console.log(11);
          uni.showModal({
            content: err.message || '请求服务失败',
            showCancel: false
          })
        }).finally(err => {
          uni.hideLoading()
        })
      },

      resetPWd(resetData) {
        this.$request('system/user/resetPwd', resetData)
          .then().catch(err => {
            uni.showModal({
              content: err.message || '请求服务失败',
              showCancel: false
            })
          }).finally()
      },
      /**
       * 获取表单数据
       * @param {Object} id
       */
      getDetail(id) {
        uni.showLoading({
          mask: true
        })
        db.collection(dbCollectionName)
          .doc(id)
          .field('username,nickname,role,dcloud_appid as authorizedApp,tags,mobile,email,status,integral')
          .get()
          .then((res) => {
            const data = res.result.data[0]
            if (data) {
              if (data.status === undefined) {
                data.status = true
              }
              if (data.status === 0) {
                data.status = true
              }
              if (data.status === 1) {
                data.status = false
              }
              this.formData = Object.assign(this.formData, data);
              this.loadAppList(this.formData.authorizedApp);
            }
          }).catch((err) => {
            uni.showModal({
              content: err.message || '请求服务失败',
              showCancel: false
            })
          }).finally(() => {
            uni.hideLoading()
          })
      },
      loadroles() {
        db.collection('uni-id-roles').limit(500).get().then(res => {
          const roleIds = []
          this.roles = res.result.data.map(item => {
            roleIds.push(item.role_id)
            return {
              value: item.role_id,
              text: item.role_name
            }
          })
          if (roleIds.indexOf('admin') === -1) {
            this.roles.unshift({
              value: 'admin',
              text: '超级管理员'
            })
          }
        }).catch(err => {
          uni.showModal({
            title: '提示',
            content: err.message,
            showCancel: false
          })
        })
      },
      loadAppList(authorizedApp) {
        db.collection('opendb-app-list').limit(500).get().then(res => {
          let list = res.result.data.map((item, index) => {
            return {
              value: item.appid,
              text: item.name
            }
          });
          if (!list) list = [];
          authorizedApp.map((appid) => {
            let info = list.find((item) => {
              return item.value === appid;
            });
            if (!info) {
              this.unknownAppids.push(appid);
              list.push({
                value: appid,
                text: `未知应用${appid}`
              });
            }
          });
          this.appList = list;
        }).catch(err => {
          uni.showModal({
            title: '提示',
            content: err.message,
            showCancel: false
          })
        })
      },
      // status 对应文字显示
      parseUserStatus(status) {
        if (status === 0) {
          return '启用'
        } else if (status === 1) {
          return '禁用'
        } else if (status === 2) {
          return '审核中'
        } else if (status === 3) {
          return '审核拒绝'
        } else if (status === 4) {
          return '已注销'
        } else if (typeof status !== "undefined") {
          return '未知'
        } else {
          return '启用'
        }
      }
    },
    computed: {
      unknownAppidsCom() {
        let str = "";
        this.unknownAppids.map((item, index) => {
          str += item;
          if (index !== this.unknownAppids.length - 1) {
            str += "、";
          }
        });
        return str;
      }
    }
  }
</script>

<style>
  .reset-password-btn {
    /* height: 100%; */
    line-height: 36px;
    color: #007AFF;
    text-decoration: underline;
    cursor: pointer;
  }

  .cancel-reset-password-btn {
    color: #007AFF;
    padding-right: 10px;
    cursor: pointer;
  }

  ::v-deep .uni-forms-item__label {
    width: 90px !important;
  }

  .uni-forms-item-flex-center-x {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
</style>